<template>
  <div>
    <slot name="default"></slot>
    <h3>Three组件</h3>
    <slot name="header123"></slot>
    <!-- <span>uname: {{ uname }} {{ uage }}</span> -->
    <p>{{ props.a }} - {{ props.b }}</p>
    <button @click="getProps">props</button>
    <component :is="headerContent"></component>
  </div>
</template>

<script setup>
import {
  defineProps,
  useAttrs,
  defineEmits,
  defineExpose,
  useSlots,
} from "vue";

// const props = defineProps(["a", "b"]);
const props = defineProps({
  a: String,
  b: {
    type: String,
    default: "100",
  },
});

const emit = defineEmits(["getlists"]); // 返回值emit 等价于 this.$emit/context.emit。defineEmits的参数就是准备发射的事件名称列表

const getProps = () => {
  console.log(props.a, props.b);
  emit("getlists", [1, 2, 3, 4]);
};

const attrs = useAttrs();
console.log(attrs);

const testFun = () => {
  console.log("触发了");
};
const aaa = 100;
const bbb = true;

// 向父组件暴漏当前子组件的数据和方法，让父组件使用
defineExpose({
  aaa,
  bbb,
  testFun,
});

const slots = useSlots(); // 在js中获取插槽内容
const defaultContent = slots.default()[0]; // 默认插槽
const headerContent = slots.header123()[0]; // 具名插槽
console.log(defaultContent, headerContent);
/*
export default {
  setup() {
    const uname = inject("uname"); // 注入数据
    const uage = inject("uage"); // 注入数据
    return {
      uname,
      uage,
    };
  },
};
*/
</script>
